import React, { useEffect, useState, useMemo } from 'react'
import { useNavigate } from "react-router-dom"
import { Overlay, NavBar, DropdownMenu,Toast  } from 'react-vant';
import "./myscss/AddXiao.scss"
import axios from "axios"
axios.defaults.baseURL = "http://localhost:3000"
export default function AddXiao() {
    const navigate = useNavigate()
    let [text, setText] = useState("")
    const [visible, setVisible] = useState(false);
    const [flag, setflag] = useState(0)
    const [value, setValue] = useState(0)
    const [allporpel, setAllporpel] = useState([])
    const [soupropel, setSoupropel] = useState("")

    let option1 = [
        { text: '问诊患者', value: 0 },
        { text: '挂号患者', value: 1 },
        { text: '开药患者', value: 2 },
    ]
    let newnum = useMemo(() => {
        return 140 - text.length
    }, [text])

    let ceckuse = async (v) => {
        setValue(v.value)
    }

    let getallporpel = async () => {
        let { data: { data } } = await axios.get("/getGhyy")
        let centext = ""
        if (flag === 0) {
            data = data.length
            centext = "全部门诊患者"
        }
        if (flag === 1) {
            if (value === 0) {
                data = (data.filter(item => item.isflag === 0).length)
                centext = "全部问诊患者"
            }
            if (value === 1) {
                data = (data.filter(item => item.isflag === 1).length)
                centext = "全部挂号患者"
            }
            if (value === 2) {
                data = (data.filter(item => item.isflag === 2).length)
                centext = "全部开药患者"
            }
        }
        if (flag === 2) {
            if (value === 0) {
                data = (data.filter(item => item.isflag !== 0).length)
                centext = "除问诊患者外的所有患者"
            }
            if (value === 1) {
                data = (data.filter(item => item.isflag !== 1).length)
                centext = "除挂号患者外的所有患者"
            }
            if (value === 2) {
                data = (data.filter(item => item.isflag !== 2).length)
                centext = "除开药患者外的所有患者"
            }
        }
        setAllporpel(data)
        setSoupropel(centext)
    }
    let xiaoSave = async () => {
        let data = {
            title: "新消息", //标题
            content: text,//内容
            time: Date.now(), //时间
            soupropel: soupropel
        }
        let { data: { code } } = await axios.post("/addhcy_xiaox",data)
        if (code === 200) {
            setText("")
            setflag(0)
            setValue(0)
            Toast.success('成功文案')
        }
    }
    useEffect(() => {
        getallporpel()
    }, [flag, value])
    return (
        <div id='AddXiao'>
            <div className='top1'>
                <NavBar
                    leftText="新建消息"
                    onClickLeft={() => navigate('/Hzgl/HzXiaoxi')}
                />
            </div>
            <div className='main'>
                <textarea value={text} onChange={(e) => { setText(e.target.value) }}></textarea>
                <p className='txt'>还可在输入<span>{newnum}</span>个字</p>
            </div>
            <div className='main1'>
                接收人，(已选择{allporpel}人)
                <span>❯</span>
                <p onClick={() => setVisible(true)}>选择患者人员</p>
                <div className='mbox'>
                    <Overlay visible={visible} onClick={() => setVisible(false)}
                        style={{
                            height: '100%',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                        }}>
                        <div className='mbox1' style={{ width: 300, height: 280, backgroundColor: '#fff', borderRadius: 4 }}>
                            <h2>请选择患者</h2>
                            <div className='box' onClick={() => { setflag(0) }}>所有患者
                                {flag === 0 && <span>☑</span>}
                            </div>
                            <div className='box' onClick={() => { setflag(1) }}>部分患者
                                {flag === 1 && <span>☑</span>}
                            </div>
                            <div className='box' onClick={() => { setflag(2) }}>不发给谁
                                {flag === 2 && <span>☑</span>}
                            </div>

                            {flag !== 0 && <div className='addbtm'>
                                <DropdownMenu direction='up' onChange={(v) => { ceckuse(v) }}>
                                    <DropdownMenu.Item name='value' options={option1} />
                                </DropdownMenu>
                            </div>}
                        </div>
                    </Overlay>
                </div>
            </div>
            <div className='bottom'>
                <button onClick={() => { xiaoSave() }}>保存</button>
            </div>
        </div>
    )
}
